"use client";
/*
 * @Author: hongbin
 * @Date: 2025-04-29 19:25:40
 * @LastEditors: hongbin
 * @LastEditTime: 2025-05-02 09:34:57
 * @Description:
 */
import { FC } from "react";
import { FlexDiv } from "@/styled";
import styled from "styled-components";
import Image from "next/image";

interface IProps {
    children?: React.ReactElement;
}

const RightMain: FC<IProps> = ({ children }) => {
    return (
        <SFlexDiv>
            <SImage
                src='/l_bg_r_s.png'
                alt='l_bg'
                width={494}
                height={1080}
                // fill
            />
            <Main>{children}</Main>
            {/* <SImage
                src='/l_line.png'
                alt='bg'
                width={203}
                height={994}
            /> */}
        </SFlexDiv>
    );
};

export default RightMain;

const Main = styled.main`
    position: absolute;
    height: calc(100% - 100px);
    right: 0;
    top: 50%;
    transform: translate(0%, -50%);

    display: flex;
    /* justify-content: center; */
    /* align-items: center; */

`;

const SImage = styled(Image)`
    /* opacity: 0.3; */
    /* width: 100%; */
`;

const SFlexDiv = styled(FlexDiv)`
    & >:nth-child(1) {
        position: absolute;
        top: 50%;
        right: 0;
        z-index: -2;
        /* height:calc(100% - 80px - 157px); */
        height: 100%;
        transform: translate(0%, -50%);
    }
    /* & :nth-child(2) {
        position: absolute;
        top: 50%;
        left: 406px;
        z-index: -1;
        height: 100%;
        transform: translate(0%, -50%);
    } */
`;
